<template>
  <div>
    <div>
      <slot name="formSlot"></slot>
    </div>
    <!-- <div>
      <slot name="operatSlot"></slot>
    </div> -->
    <el-table
      size="mini"
      height="460"
      border
      :data="MaterialTableData"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in MaterialHeadData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <div v-if="!item.slot">
            {{ MaterialTableData[scope.$index][item.prop] }}
          </div>
          <div v-if="item.slot">
            <slot :name="item.prop" v-bind:row="scope.row"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "MaterialTable",
  data() {
    return {};
  },
  props: {
    MaterialTableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    MaterialHeadData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否展示操作
    isoperation: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否展示分页
    ispagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 固定表格头部
    height: {
      type: Number,
      default: () => {
        return 300;
      },
    },
    // 当前第几页
    currentpage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 切换一页多少条数据的选项
    pagesizes: {
      type: Array,
      default: () => {
        return [5, 10, 15, 20];
      },
    },
    // 一页几条
    pagesize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    // 总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
  },
};
</script>